<!--
~  Licensed to the Apache Software Foundation (ASF) under one or more
~  contributor license agreements.  See the NOTICE file distributed with
~  this work for additional information regarding copyright ownership.
~  The ASF licenses this file to You under the Apache License, Version 2.0
~  (the "License"); you may not use this file except in compliance with
~  the License.  You may obtain a copy of the License at
~
~     http://www.apache.org/licenses/LICENSE-2.0
~
~  Unless required by applicable law or agreed to in writing, software
~  distributed under the License is distributed on an "AS IS" BASIS,
~  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~  See the License for the specific language governing permissions and
~  limitations under the License.
-->

<h2 mat-dialog-title>Edit Bucket</h2>
<form [formGroup]="bucketForm" (ngSubmit)="onSaveBucket()">
    <mat-dialog-content>
        <context-error-banner [context]="ErrorContextKey.UPDATE_BUCKET"></context-error-banner>
        <div class="flex flex-col gap-y-4">
            <div class="flex flex-col mb-5">
                <div>Id</div>
                <div [copy]="data.bucket.identifier" class="tertiary-color font-medium">
                    {{ data.bucket.identifier }}
                </div>
            </div>
            <mat-form-field appearance="outline">
                <mat-label>Name</mat-label>
                <input matInput formControlName="name" placeholder="Enter bucket name" />
                @if (bucketForm.get('name')?.hasError('required')) {
                    <mat-error>Name is required</mat-error>
                }
                @if (bucketForm.get('name')?.hasError('maxlength')) {
                    <mat-error>Name cannot exceed 255 characters</mat-error>
                }
            </mat-form-field>

            <mat-form-field appearance="outline">
                <mat-label>Description</mat-label>
                <textarea
                    matInput
                    formControlName="description"
                    placeholder="Enter bucket description (optional)"
                    rows="3"></textarea>
                @if (bucketForm.get('description')?.hasError('maxlength')) {
                    <mat-error>Description cannot exceed 1000 characters</mat-error>
                }
            </mat-form-field>

            <mat-checkbox formControlName="allowPublicRead">
                <mat-label
                    >Make publicly visible
                    <i
                        class="fa fa-info-circle primary-color"
                        matTooltip="Allows read access to items in this bucket by unauthenticated users. Overrides any specific policies granting read access.">
                    </i>
                </mat-label>
            </mat-checkbox>

            <mat-checkbox formControlName="allowBundleRedeploy">
                <mat-label
                    >Allow bundle overwrite
                    <i
                        class="fa fa-info-circle primary-color"
                        matTooltip="Allows released bundles in this bucket to be overwritten.">
                    </i>
                </mat-label>
            </mat-checkbox>
        </div>
    </mat-dialog-content>

    <mat-dialog-actions align="end">
        <button mat-button type="button" mat-dialog-close>Cancel</button>
        <button mat-flat-button color="primary" type="submit" [disabled]="bucketForm.invalid">Apply</button>
    </mat-dialog-actions>
</form>
